<template>
    <div class="app-container">
        <el-form ref="form" label-width="120px">
    <el-form-item label="标题：">
        <span>{{knowledge.title}}</span>
      </el-form-item>
      <el-form-item label="内容：">
        <div v-html="knowledge.content" class="noCont"></div>
      </el-form-item>
      <el-form-item label="附件列表：" v-if="knowledge.attachments.length">
       <el-card class="box-card" v-for="(item,index) in knowledge.attachments" :key="index">
              <el-form>
                    <el-form-item label="附件名称：">
                        <span>{{item.name}}</span>
                    </el-form-item>
                    <el-form-item label="文件类型：" style="margin-top:20px">
                        <span>{{item.type.text}}</span>
                    </el-form-item>
                    <el-form-item label="附件描述：" style="margin-top:20px">
                        <span>{{item.desc}}</span>
                    </el-form-item>
                        <img style="margin-top: -1px;margin-left:-1px;width: 150px;height: 150px;border-radius: 6px" v-if="item.url&&item.type.value=='image'"  :src="item.url" class="avatar">
                        <audio :src="item.url" ref="audio" v-if="item.url&&item.type.value=='audio'" :controls="item.url"></audio>
              </el-form>
          </el-card>
      </el-form-item>
    <el-form-item  label="标签：">
        <el-button v-for="(item,index) in knowledge.tags" :label="item.id" :key="index">{{item.name}}</el-button>
    </el-form-item>
    </el-form>
    <el-button class="put" type="primary" @click="goPut(knowledge.id,knowledge.managerId)">修改</el-button>
  </div>
</template>


<script>
import { detail } from '@/api/culture.js';
import {showDecimal} from '@/utils';
export default {
    data(){
        return {
            knowledge:{
                attachments:[]
            }
        }
    },
    methods:{
        getDetails(){
          detail({targetId:this.$route.query.id}).then((json) => {
            if(json.status === 200){
               this.knowledge=json.data
              }else{
                this.$message.error(json.data.message);
              }
          });
        },
        goPut(id,managerId){
            this.$router.push({name:'addContent',query:{id,managerId}})
        }
    },
    mounted(){
        // console.log('informationData',this.informationData)
       this.getDetails();
    }
}
</script>
<style lang="scss">
.noCont{
    p{
        margin: 0;
    }
}
</style>


<style lang="scss" scoped>
.box-card{
    width:30%;
    margin-bottom: 30px;
}
.Img{
    width:200px;
    height:130px;
    margin-top: 15px;
    img{
        width:100%;
        height:100%;
    }
}
.put{
   margin-left: 5%;
}
.merchantDetails{
     margin-top: 32px;
    .content{
        width: 90%;
        margin: 0 auto;
        .topBox{
            color: rgba(16, 16, 16, 1);
            font-size: 24px;
            margin-bottom: 50px;
        }

        .form{
            background: #fff;
            padding: 40px;

            h3{
                color: rgba(45, 45, 45, 1);
                font-size: 20px;
                font-weight: 400;
                display: flex;
                align-items: center;
                margin-bottom: 43px;
                i{
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    background: #be1a21;
                    margin-right: 11px;
                    border-radius: 50px;
                }
            }
            p{
                color: rgba(172, 172, 172, 1);
                font-size: 15px;
                text-align: left;
            }

            .upLoad{
                width: 82px;
                height: 82px;
                img{
                    width: 100%;
                    height: 100%;
                }
                .iconfont{

                    font-size: 5rem;
                }
                .icon-tianjia1:before{
                    margin-top: 2rem;
                    display: inline-block;
                }
            }
        }

        .btnBox{
            width: 100%;
            border-top: 1px solid rgba(213, 212, 212, 1);
            margin: 96px 0 32px 0;
            padding-top:66px;
            text-align: center;
            p{
                font-size: 14px;
                color: rgba(85, 84, 84, 1);
                margin-top: 24px;
                text-align: center;
            }
        }
    }
}
</style>